<template>
  <span>{{ showDict }}</span>
</template>

<script>
import toolTree from "@/tool/tool-tree";

export default {
  props: {
    dictFun: {
      type: Function,
    },
    dictList: {
      type: Array,
    },
    dictVal: {
      type: [String, Number, Array],
      default: "",
    },
  },
  data() {
    return {
      currDictList: [],
    };
  },
  computed: {
    showDict() {
      if (!this.currDictList || this.currDictList.length < 1 || !this.dictVal) {
        return this.dictVal;
      }
      let dictAllList = toolTree.treeToList(this.currDictList);
      let vals = [];
      let tval = this.dictVal.value || this.dictVal;
      let type = typeof tval;
      if (type === "string" || type === "number" || type === "boolean") {
        vals = (tval + "").split(",");
      }
      if (type === "object") {
        vals = tval;
      }
      return vals
        .map((val) => {
          let dictRes = dictAllList.find(
            (dict) => dict.val.toString() === val
          );
          if (!dictRes) {
            return this.dictVal;
          }
          return dictRes.name;
        })
        .join(",");
    },
  },
  async mounted() {
    if (this.dictList && this.dictList.length > 0) {
      this.currDictList = this.dictList;
    } else if (this.dictFun) {
      // let tDictList = toolCache.cache(this.dictFun);
      // if (!tDictList) {
      //   toolCache.cache(this.dictFun, (tDictList = ));
      // }
      this.currDictList = await this.dictFun();
    }
  },
};
</script>

<style></style>
